第十三章客户端检测

2022-06-17

字数统计: 1.9k字 | 阅读时长≈ 7分

虽然浏览器厂商齐心协力想要实现一致的接口，但事实上仍然是每家浏览器都有自己的长处与不足。跨平台的浏览器尽管版本相同，但总会存在不同的问题。这些差异迫使 Web 开发者要么面向最大公约数而设计，要么（更常见地）使用各种方法来检测客户端，以克服或避免这些缺陷。

能力检测

不同的浏览器对 es语法的支持程度不同，DOM方法也有所差异。如果我们要做浏览器兼容，那么就要对浏览器能力进行检测，对不同浏览器进行特殊处理，保证程序功能的正常运行。
   
   比如，IE5 之前的版本中没有 document.getElementById()这个 DOM 方法，但可以通过 document.all 属性实现同样的功能。为此，可以进行如下能力检测： 
   function getElement(id) { 
       if (document.getElementById) { 
           return document.getElementById(id); 
       } else if (document.all) { 
           return document.all[id]; 
       } else { 
           throw new Error("No way to retrieve element!"); 
       }
   }

用户代理检测

用户代理即用户的浏览器。我们如何检测用户使用的浏览器？
通过 window.navigator.usereAgent 这个字符串。但是浏览器厂家比较狗经常改这些字符串，让你无法判断。

	通过解析浏览器返回的用户代理字符串，可以极其准确地推断出下列相关的环境信息： 
     浏览器 
     浏览器版本 
     浏览器渲染引擎 
     设备类型（桌面/移动） 
     设备生产商 
     设备型号 
     操作系统 
     操作系统版本 
	当然，新浏览器、新操作系统和新硬件设备随时可能出现，其中很多可能有着类似但并不相同的用 户代理字符串。因此，用户代理解析程序需要与时俱进，频繁更新，以免落伍。自己手写的解析程序如 果不及时更新或修订，很容易就过时了。
    不建议自己从头写，这里推荐一些 GitHub 上维护比较频繁的第三方用户代理解析程序： 
     Bowser 
     UAParser.js 
     Platform.js 
     CURRENT-DEVICE 
     Google Closure 
     Mootools

软件硬件检测

	现代浏览器提供了一组与页面执行环境相关的信息，包括浏览器、操作系统、硬件和周边设备信息。 这些属性可以通过暴露在 window.navigator 上的一组 API 获得。不过，这些 API 的跨浏览器支持还 不够好，远未达到标准化的程度。

  1、  navigator.oscpu 
	navigator.oscpu 属性是一个字符串，通常对应用户代理字符串中操作系统/系统架构相关信息。 根据 HTML 实时标准：
	oscpu 属性的获取方法必须返回空字符串或者表示浏览器所在平台的字符串，
    比如"Windows NT 10.0; Win64; x64"或"Linux x86_64"。

  2、navigator.vendor
	navigator.vendor 属性是一个字符串，通常包含浏览器开发商信息。返回这个字符串是浏览器 navigator 兼容模式的一个功能。
    根据 HTML 实时标准： 
    navigator.vendor 返回一个空字符串，
    也可能返回字符串 "Apple Computer, Inc." 
	或字符串 "Google Inc."。

  3、navigator.platform
	navigator.platform 属性是一个字符串，通常表示浏览器所在的操作系统。
    	根据 HTML 实时标准：
		navigator.platform 必须返回一个字符串或表示浏览器所在平台的字符串，
        例如"MacIntel"、 "Win32"、"FreeBSD i386"或"WebTV OS"。

    
  4、 screen.colorDepth 和 screen.pixelDepth
	screen.colorDepth 和 screen.pixelDepth 返回一样的值，即显示器每像素颜色的位深。
    根据 CSS 对象模型（CSSOM）规范： 
    screen.colorDepth 和 screen.pixelDepth 属性应该返回输出设备中每像素用于显示 颜色的位数，不包含 alpha 通道。
	Chrome 中这两个属性的值如下所示： 
    console.log(screen.colorDepth); // 24 
	console.log(screen.pixelDepth); // 24

  5、screen.orientation
	返回 ScreenOrientation 对象
    {
        angle: 0,//相对于默认屏幕的角度
        onchange: null,
        type: "landscape-primary",
    }
    type值有下列四种
     portrait-primary 垂直看 angle 0
     portrait-secondary 
     landscape-primary 向左转 angle 90
     landscape-secondary 向右转 angle 270

        
  浏览器元素据
  
  1）Geolocation API
		navigator.geolocation 属性暴露了 Geolocation API，可以让浏览器脚本感知当前设备的地理位 置。这个 API 只在安全执行环境（通过 HTTPS 获取的脚本）中可用。

  var options = {
        enableHighAccuracy: true, //true:返回经量精确坐标，false:返回不够精确的坐标，但是省电，快
        timeout: 1000,//等待的最长时间，超过时间则默认以 TIMEOUT调用错误回调函数
        maximumAge: 1000// 表示缓存坐标的最长有效期，默认 0，设备查询位置小号资源，缓存坐标下次返回缓存值
    };

    function success(pos) {
          alert(pos);
          var crd = pos.coords;

          console.log('Your current position is:');
          console.log('Latitude : ' + crd.latitude);
          console.log('Longitude: ' + crd.longitude);
          console.log('More or less ' + crd.accuracy + ' meters.');
    };

    function error(err) {
            switch(err.code){
                case 0:
                    alert("获取位置信息出错！");
                    break;
                case 1:
                    alert("您设置了阻止该页面获取位置信息！");
                    break;
                case 2:
                    alert("浏览器无法确定您的位置！");
                    break;
                case 3:
                    alert("获取位置信息超时！");
                    break;
            }
     };

 	navigator.geolocation.getCurrentPosition(success, error, options);
  
	    
        
  2）Connection State 和 NetworkInformation API
  	-navigator.onLine  // true:联网，false:断网
        const connectionStateChange = () => console.log(navigator.onLine); 	
        //监听联网事件
        window.addEventListener('online', connectionStateChange); 
        //监听断网事件
        window.addEventListener('offline', connectionStateChange); 
        // 设备联网时： 
        // true 
        // 设备断网时： 
        // false
        
	-navigator.connection
        {
            downlink: 1.4,//设备当前宽带
            effectiveType: "3g",//连接速度与质量
            onchange: null,//任何连接状态发生变化时都会激发change事件
            rtt: 400,//毫秒 表网络实际往返时间
            saveData: false,//用户设备是否开启节流模式
            type:cellular,//网络连接技术
        }
        effectiveType:
             slow-2g 
                - 往返时间 ＞ 2000ms 
                - 下行带宽 ＜ 50kbit/s 
             2g 
                - 2000ms ＞ 往返时间 ≥ 1400ms 
                - 70kbit/s ＞ 下行带宽 ≥ 50kbit/s
             3g 
                - 1400ms ＞ 往返时间 ≥ 270ms 
                - 700kbit/s ＞ 下行带宽 ≥ 70kbit/s 
             4g 
                - 270ms ＞ 往返时间 ≥ 0ms 
                - 下行带宽 ≥ 700kbit/s
		type:
             bluetooth：蓝牙。 
             cellular：蜂窝。 
             ethernet：以太网。 
             none：无网络连接。相当于 navigator.onLine === false。
             mixed：多种网络混合。 
             other：其他。 
             unknown：不确定。 
             wifi：Wi-Fi。 
             wimax：WiMAX。
            
    	change事件的使用:
             -navigator. connection.addEventListener('change',changeHandler)		
             -navigator.connection.onchange = changeHandler

	
     -Battery Status API
		访问设备电池即充电状态的信息
        
            navigator.getBattery().then((b) => console.log(b));

            {
                charging: true,//是否接入电源
                chargingTime: 0,//整数：预计距离充满还有多少秒，已充满，没电池都是0
                dischargingTime: Infinity,//整数：预计耗尽还有多少秒，设备没电池，满电充电返回Infinity
                level: 1,//浮点数表电量百分比，没电池，满电返回1.0
                onchargingchange: null,//充电状态变化时的处理程序
                onchargingtimechange: null,//充电时间变化时的处理程序
                ondischargingtimechange: null,//放电时间变化时的处理程序
                onlevelchange: null,//电量百分比变化时的处理程序
            }
        	事件处理
            navigator.getBattery().then((battery) => {
                battery.addEventListener('chargingchange', chargingChangeHandler);
                ...
            })

	-硬件
        浏览器检测硬件能力有限
        1、navigator.hardwareConcurrency //逻辑处理器核心数，无法确定返回1
        2、navigator.deviceMemory //返回设备大致系统内存大小
        3、navigator.maxTouchPoints //返回触摸屏支持的最大关联触点数量

            
【注意】 强烈建议在使用这些 API 之前先检测它们是否存在，因为其中多数都不是强制性 的，且很多浏览器没有支持。

本文作者： 王不留行
本文链接： https://wyf195075595.github.io/2022/06/17/programming/红宝书笔记/第十三章客户端检测/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！